<template>
  <div class="layers-mask"></div>
  <div class="layers-contain">
    <div class="layers-main">
      <div class="layers-close-btn" @click="closeThis">
        <img src="../../assets/img/public/关闭.png"></img>
      </div>
      <div class="layers-title"></div>
      <!-- 今日基本情况start -->
      <contentTitle :title="'今日基本情况'" />
      <div class="yz-content-bg" style="height: 109px">
        <div class="layers-layers-100">
          <div class="block_item_contain4">
            <div class="block_item">
              <img class="icon-img" style="margin-left: 0;margin-right: 5%" src="../../assets/img/public/carli.png"/>
              <div>
                <span class="num"><span class="shadow">{{ jrjbqk.jrrq }}</span></span>
                <br>
                <span class="text">今日入区</span>
              </div>
            </div>
            <div class="block_item">
              <img class="icon-img" style="margin-left: 0;margin-right: 5%" src="../../assets/img/public/carli.png"/>
              <div>
                <span class="num"><span class="shadow">{{ jrjbqk.jrcq }}</span></span>
                <br>
                <span class="text">今日出区</span>
              </div>
            </div>
            <div class="block_item">
              <img class="icon-img" style="margin-left: 0;margin-right: 5%" src="../../assets/img/public/carli.png"/>
              <div>
                <span class="num"><span class="shadow">{{ jrjbqk.dqtl }}</span></span>
                <br>
                <span class="text">当前停留</span>
              </div>
            </div>
            <div class="block_item">
              <img class="icon-img" style="margin-left: 0;margin-right: 5%" src="../../assets/img/public/carli.png"/>
              <div>
                <span class="num"><span class="shadow">{{ jrjbqk.cws }}</span></span>
                <br>
                <span class="text">车位数</span>
              </div>
            </div>
            <div class="block_item">
              <img class="icon-img" style="margin-left: 0;margin-right: 5%" src="../../assets/img/public/carli.png"/>
              <div>
                <span class="num"><span class="shadow">{{ jrjbqk.pjtlsj }}</span></span>
                <br>
                <span class="text">平均停留时间<p>（分钟）</p></span>
              </div>
            </div>
            <div class="block_item">
              <img class="icon-img" style="margin-left: 0;margin-right: 5%" src="../../assets/img/public/carli.png"/>
              <div>
                <span class="num"><span class="shadow">{{ jrjbqk.cwbhd }}</span><span class="small">%</span></span>
                <br>
                <span class="text">车位饱和度</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 今日基本情况 end -->

      <div class="layers-content">
        <!-- 今日入区车型占比 start -->
        <div class="layers-layers-50">
          <div class="content_info_item">
          <contentTitle :title="'今日入区车型占比'"/>
          <div class="yz-content-bg">
             <div class="chart" ref="jrrqcxzbRef"></div>
           </div>
         </div>
         <div class="content_info_item">
           <contentTitle :title="'近七日车流趋势'"/>
           <div class="yz-content-bg">
            <div class="chart" ref="jqrclqsRef"></div>
           </div>
         </div>

        </div>
        <div class="layers-layers-50">
          <div class="content_info_item">
            <contentTitle :title="'今日车流趋势'"/>
            <div class="yz-content-bg">
              <div class="chart" ref="jrclqsRef"></div>
            </div>
          </div>
          <div class="content_info_item">
            <contentTitle :title="'今日车位饱和度趋势'"/>
            <div class="yz-content-bg">
              <div class="chart" ref="jrcwbhdqsRef"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {onMounted, ref, watch} from "vue";
import contentTitle from "./contentTitle.vue"
import {drawLine} from "../../util/chartUtil.js";
import {ajaxRequest} from "../../api/code.js";

const tag = ref(0)
const props = defineProps({
  title: String,
  compid: Number,
  options: Array,
})

const emit = defineEmits(['closeLayers']);

const closeThis = ()=>{
  emit('closeLayers');
}

/* 服务总体情况 start */
const jrjbqk = ref({
  jrrq: 600,//今日入区
  jrcq: 50,//今日出区
  dqtl: 10,//当前停留
  cws: 10, //车位数
  pjtlsj:20,//平均停留时间
  cwbhd: 80//车位饱和度
})
/* 服务总体情况 end */

/* 今日入区车型占比 start */
const jrrqcxzbRef = ref();
const jrrqcxzbData = ref([
  {
    name: '小型客车',
    value: 12,
    itemStyle: {
      color: '#25A6FF',
    }
  }, {
    name: '客运车辆',
    value: 12,
    itemStyle: {
      color: '#30F3FF'
    }
  },
  {
    name: '其他特种车',
    value: 12,
    itemStyle: {
      color: '#70D69F'
    }
  },
  {
    name: '普通货车',
    value: 30,
    itemStyle: {
      color: '#FF9A2E'
    }
  },
  {
    name: '危化品车',
    value: 12,
    itemStyle: {
      color: '#FF7552'
    }
  },
  {
    name: '其他货车',
    value: 12,
    itemStyle: {
      color: '#FFE65C'
    }
  }])
function getData( tdata ){
  let data = [];
  for (let i = 0; i < tdata.value.length; i++) {
  const en = tdata.value[i];
  data.push({
    value: en.value,
    name: en.name,
    itemStyle: {
      normal: {
        borderWidth: 8,
        shadowBlur: 20,
        borderRadius:20,
        borderColor:en.itemStyle.color,
        shadowColor: en.itemStyle.color
      }
    }
  }, {
      value: 8,
      name: '',
      itemStyle: {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          color: 'rgba(0, 0, 0, 0)',
          borderColor: 'rgba(0, 0, 0, 0)',
          borderWidth: 0
        }
      }
    });
  }
  return data;
}
const jrrqcxzbOpt = ref({
  color : jrrqcxzbData.value.map((res)=>res.itemStyle.color),
  tooltip: {
    show: false
  },
  legend: {
    orient: 'vertical',
    data: jrrqcxzbData.value.map((res)=>res.name),
    right: '10%',
    top: 'center',
    align: 'left',
    itemWidth:12,
    itemHeight:12,
    formatter: function (param) {
      let rate = 0;
      jrrqcxzbData.value.forEach(a=>{
        if (a.name === param){
          rate = a.value;
        }
      })
      return " {a|"+ param + "}" + rate + '%';
    },
    textStyle: {
      color: '#FFF',
      rich: {
        a: {
          width: 70,
        }
      }
    },
  },
  toolbox: {
    show: false
  },
  series: [{
    name: '',
    type: 'pie',
    clockWise: false,
    radius: [55, 59],
    width:185,
    height:152,
    hoverAnimation: false,
    center: ['50%', '55%'],
    left:"13%",
    top:"8%",
    itemStyle: {
      normal:{
        label: {
          show:false
        }
      }
    },
    data: getData(jrrqcxzbData)
  }]
})
/* 今日入区车型占比 end */


/* 今日各车型平均停留时长 */
const jrclqsRef = ref();
const jrclqsDataY = ref(['0点','2点', '4点', '6点', '8点', '12点', '14点','16点','18点', '20点', '22点', '24点'])
const jrclqsDataseries = ref([10, 20, 10, 30, 10, 30, 10, 20, 10, 30, 10, 30])
const jrclqsOption = ref({
  legend:{
    show:false,
    textStyle:{
      color:'#fff'
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    top:'18%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        textStyle: {
          color: 'white'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(64,158,255,0.38)', // 设置背景线的颜色为红色
          type: 'dashed' // 线的类型，默认为实线
        }
      },
    }
  ],
  xAxis: [
    {
      type: 'category',
      data: jrclqsDataY.value,
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        textStyle: {
          color: 'white' // 设置 x 轴文字颜色为白色
        }
      }
    }
  ],
  series: [
    {
      name: '平均停留时长',
      type: 'line',
      smooth: true,
      data: jrclqsDataseries.value,
      itemStyle: {
        color: '#93E2EF'
      },
      lineStyle: {
        width: 4
      }
    }
  ]
})

/* 近七日车流流量分析 start */
const jqrclqsRef = ref()
const jqrclqsXAxis = ref(['第1天','第2天','第3天','第4天','第5天','第6天','第7天'])
const jqrclqsData = ref([0.2, 0.8, 0.7, 0.3, 0.5, 0.2, 0.7])
const jqrclqsOpt = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      shadowStyle: {
        color: 'rgba(30,60,100,0.5)',
      }
    },
    backgroundColor: 'rgba(30,60,100,0.5)',
    borderWidth: 0,
    textStyle: {
      color: '#fff',
      fontWeight: 'normal',
      fontSize: 13
    },
    padding: [10, 15],
    formatter: function (param) {
      return param[0].name + "<br>" + param[0].value;
    }
  },
  grid: {
    left: '5%',
    right: '5%',
    top: '15%',
    bottom: '5%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisTick: {show: false},
    axisLine: {
      lineStyle: {
        color: 'rgba(21,37,70)'
      }
    },
    axisLabel: {
      color: '#ffffff',
      textStyle: {
        color: 'white' // 设置 x 轴文字颜色为白色
      }
    },
    nameTextStyle: {
      color: 'rgb(255,255,255)'
    },
    data: jqrclqsXAxis.value
  },
  yAxis: {
    type: 'value',
    splitLine: {
      lineStyle: {
        color: 'rgba(21,37,70)'
      }
    },
    axisTick: {show: false},
    axisLabel: {
      textStyle: {
        color: 'white' // 设置 x 轴文字颜色为白色
      }
    }
  },
  series: [
    {
      type: 'bar', // 柱状图
      barWidth: 20, // 柱条的宽度,不设时自适应
      itemStyle: {
        borderRadius: [10, 10, 0, 0], // 这里设置圆角
        // 下面就是使用线性渐变      color支持(rgb(255,255,255)、rgba(255,255,255,1)、#fff,也支持渐变色和纹理填充)
        color: {
          "x": 0,
          "y": 0,
          "x2": 0,
          "y2": 1,
          "type": "linear",
          "global": false,
          "colorStops": [{
            "offset": 0, // 0%处的颜色
            "color": "#029EE1"
          }, {
            "offset": 1, // 100%处的颜色
            "color": "rgba(6,233,254,0.00)"
          }]
        }
      },
      data: jqrclqsData.value,
    },
  ]
})
/* 近七日车流趋势 end */

/** 今日车位饱和度趋势 start */
const jrcwbhdqsRef = ref();
const jrcwbhdqsX = ref(['0点','2点', '4点', '6点', '8点', '12点', '14点','16点','18点', '20点', '22点', '24点'])
const jrcwbhdqsY = ref([10, 20, 10, 30, 10, 30, 10, 20, 10, 30, 10, 30])
const jrcwbhdqsOpt = ref({
  legend:{
    show:false,
    textStyle:{
      color:'#fff'
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    top:'18%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        textStyle: {
          color: 'white'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(64,158,255,0.38)', // 设置背景线的颜色为红色
          type: 'dashed' // 线的类型，默认为实线
        }
      },
    }
  ],
  xAxis: [
    {
      type: 'category',
      data: jrcwbhdqsX.value,
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        textStyle: {
          color: 'white' // 设置 x 轴文字颜色为白色
        }
      }
    }
  ],
  series: [
    {
      name: '平均停留时长',
      type: 'line',
      smooth: true,
      data: jrcwbhdqsY.value,
      itemStyle: {
        color: '#FF7552'
      },
      lineStyle: {
        width: 4
      }
    }
  ]
})


/** 近七日车流量各车型统计 end */
let  carChart,jrclqsChart,todayServeZoneChart,jrcwbhdqsChart
onMounted(()=>{
  // getCurCompOverAll()
  // getTypeCountByTodayInFlow()
  // getTypeCountBy7DayFlow()
  // get7DayFlow()
  // getjrclqsStayingTimeTodayType()
  carChart=drawLine(jqrclqsRef.value, jqrclqsOpt.value)
  jrcwbhdqsChart = drawLine(jrcwbhdqsRef.value, jrcwbhdqsOpt.value)
  jrclqsChart = drawLine(jrclqsRef.value,jrclqsOption.value)
  todayServeZoneChart = drawLine(jrrqcxzbRef.value,jrrqcxzbOpt.value);
})
async function getCurCompOverAll(){
  let params = {
    outercompid:props.compid+''
  }
  ajaxRequest('post', 'getCurCompOverAll', params).then(res => {
    if(res.data.data){
        let item = res.data.data
        serverMainJson.value.todayInCarTotal=item.jrrqll
        serverMainJson.value.todayOutCarTotal=item.jrcqll
        serverMainJson.value.currentCarTotal=item.tcs
        serverMainJson.value.carRate=item.bhd
      }
  })
}
const keche=ref({
  num:0,
  bfb:0
})
const huoche=ref({
  num:0,
  bfb:0
})
async function getTypeCountByTodayInFlow(){
  const params = {
    outercompid:props.compid+''
   }
  ajaxRequest('post', 'getTypeCountByTodayInFlow', params).then(res => {
    if(res.data.data&&res.data.data.length>0){
        let total=0;
        keche.value.num=0;
        keche.value.bfb=0;
        huoche.value.num=0
        huoche.value.bfb=0
        res.data.data.forEach(function(item) {
          total = total + item.count;
        });
        res.data.data.forEach(function(item) {
            // thisYear.total = (item.total/ 10000).toFixed(4) ?? 0;
            jrrqcxzbData.value.forEach( data =>{
              if(data.name===item.vehicletype){
                data.value =((item.count/total) * 100).toFixed(2);
                if(data.name==='小型客车'||data.name==='客运车辆'||data.name==='其他特种车'){
                  keche.value.bfb=keche.value.bfb+Number(data.value)
                }else{
                  huoche.value.bfb=huoche.value.bfb+Number(data.value)
                }
              }
            })
            if(item.vehicletype==='小型客车'||item.vehicletype==='客运车辆'||item.vehicletype==='其他特种车'){
              keche.value.num=keche.value.num+item.count
            }else{
              huoche.value.num=huoche.value.num+item.count
            }
        });
        keche.value.bfb = keche.value.bfb.toFixed(2);
        huoche.value.bfb = huoche.value.bfb.toFixed(2);
        updateTodayServeZoneChart(todayServeZoneChart,jrrqcxzbOpt,jrrqcxzbData)
      }
  })
}
function updateTodayServeZoneChart( chart , chartOption,data){

  chartOption.value.color = data.value.map((res)=>res.itemStyle.color)
  chartOption.value.series[0].data=getData(data)
  chart.setOption(chartOption.value)
}
async function get7DayFlow(){
  const params = {
    outercompid:props.compid+''
   }
  ajaxRequest('post', 'get7DayFlow', params).then(res => {
    if(res.data.data&&res.data.data.length>0){
        jqrclqsData.value = [];
        jqrclqsXAxis.value = [];
        res.data.data.forEach(function(item) {
          jqrclqsData.value.push(item.count)
          jqrclqsXAxis.value.push(getMMDD(item.date_str))
        });
        updatejqrclqsDataChart(carChart,jqrclqsOpt,jqrclqsData,jqrclqsXAxis)
      }
  })
}
function updatejqrclqsDataChart( chart , chartOption,data,xAxis){
  chartOption.value.series[0].data=data.value
  chartOption.value.series[1].data=data.value
  chartOption.value.series[2].data=data.value
  chartOption.value.xAxis.data=xAxis.value
  chart.setOption(chartOption.value)
}
function getMMDD(dateStr){
  let parts = dateStr.split('-'); // 将字符串按"-"分割成数组
  let monthDay = parts[1] + '-' + parts[2]; // 拼接月和日
  return monthDay
}
async function getTypeCountBy7DayFlow(){
  const params = {
    outercompid:props.compid+''
   }
  ajaxRequest('post', 'getTypeCountBy7DayFlow', params).then(res => {
    if(res.data.data&&res.data.data.length>0){
        xAxisData.value = []
        toDateList(res.data.data).forEach(date=>{
          xAxisData.value.push(date)
        })
        setSeriesData(res.data.data);
        updatejrcwbhdqsChart(jrcwbhdqsChart,jrcwbhdqsOptions,seriesData,xAxisData,jrcwbhdqsLegendData)
      }
  })
}
function updatejrcwbhdqsChart( chart , chartOption,data,xAxis,legendData){
  chartOption.value.series=data.value
  chartOption.value.xAxis.data=xAxis.value
  chartOption.value.legend.data=legendData.value
  chart.setOption(chartOption.value)
}
const jrclqsDatayIndexMap = new Map()
jrclqsDatayIndexMap.set('小型客车',5)
jrclqsDatayIndexMap.set('客运车辆',4)
jrclqsDatayIndexMap.set('其他特种车',3)
jrclqsDatayIndexMap.set('普通货车',2)
jrclqsDatayIndexMap.set('危化品车',1)
jrclqsDatayIndexMap.set('其他货车',0)
async function getjrclqsStayingTimeTodayType(){
  const params = {
    outercompid:props.compid+''
   }
  ajaxRequest('post', 'getjrclqsStayingTimeTodayType', params).then(res => {
    if(res.data.data&&res.data.data.length>0){
        jrclqsDataseries.value = [0,0,0,0,0,0]
        res.data.data.forEach(function(item) {
            let index = jrclqsDatayIndexMap.get(item.vehicletypecn)
            if(index||index==0){
              jrclqsDataseries.value[index]=item.stayingtime
            }
        });
        updatejrclqsCarTypeChart(jrclqsChart,jrclqsOption,jrclqsDataseries)
      }
  })
}
function updatejrclqsCarTypeChart( chart , chartOption,data){
  chartOption.value.series[0].data=data.value
  chart.setOption(chartOption.value)
}

function toDateList(datas){
  const dateSet = new Set();
  datas.forEach(item => {
    dateSet.add(item.pass_date);
  });
  return dateSet;
}
function setSeriesData(datas){
  const dateIndexMap = new Map();
  for (let i = 0; i < xAxisData.value.length; i++) {
    dateIndexMap.set(xAxisData.value[i], i);
  }
  datas.forEach(item => {
    const index = dateIndexMap.get(item.pass_date);
    if (index !== undefined) {
        seriesData.value.find(series => series.name === item.vehicletypecn).data[index] = item.count;
    }
  });
}
</script>
<style scoped>
.custom_legend_box{
  position: absolute;
  right: 3vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.5vh;
  .custom_legend_box_item{
    line-height: 3.5vh;
    display: flex;
    .custom_legend_box_item_sq{
      width: 1vh;
      height: 1vh;
      position: relative;
      top: 1.5vh;
      left: -1vh;
    }
    .custom_legend_box_item_content{
      display: flex;
      width: 13vh;
      justify-content: space-between;
      .custom_legend_box_item_rate{
        color: #2d87cf;
        span{
          color: white;
        }
      }
    }
  }
}


.block_item_contain4{
  width: 100%;
  display: flex;
}

.block_item_contain4 .block_item{
  width: 25%;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}

.layers-layers-100{
  width: 100%;
  position: relative;
  display: flex;
  height: 100%;
  align-content: center;
  flex-wrap: wrap;
}
.layers-mask{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: #053041a8;
}
.layers-contain{
  z-index: 10000;
  position: fixed;
  top: 5vh;
  width: 100%;
  .layers-main{
    position: relative;
    margin: 0 auto;
    width: 120vh;
    height: 86vh;
    color: white;
    background: rgba(5,36,44,0.7);
    background-size: 100% 100%;
    padding: 0 4vh;
    .layers-title{
      font-size: 1.7vh;
      padding-top: 5vh;
      padding-bottom: 3vh;
    }
    .layers-content{
      display: flex;
      .layers-layers-50{
        width: 50%;
        position: relative;
        margin-top: 2vh;
      }
    }
  }
}
.layers-close-btn{
  position: absolute;
  right: 22px;
  top: 34px;
  font-size: 2.5vh;
  cursor: pointer;
}

.custom_process_bottom_box{
  display: flex;
  .custom_process_bottom_box_half{
    .custom_process_bottom_box_bar{
      height: 0.8vh;
      background: #00ffff;
      margin-top: 1vh;
    }
  }
}
.custom_process_bottom_box_info{
  display: flex;
  justify-content: space-between;
  .custom_process_bottom_box_title{
    display: flex;
    font-size: 1.4vh;
    .c{
      padding-right: 1vh;
    }
    .n{
      color: #e3e343;
      padding-right: 0.5vh;
      span{
        color: white;
        padding-left: 1px;
      }
    }
    .r{
      color: #2d87cf;
      span{
        color: white;
        padding-left: 1px;
      }
    }
  }
}
.content_info_item{
  height: 30vh;
  position: relative;
  margin: 1vh;
  width: auto;
}
</style>